<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-aside clearfix">
        <el-button
          @click="rToCreate"
          type="primary"
          plain
          class="fr btn"
          v-hasAuth:seestar_customizeCreateWarning
          >新增预警设置</el-button
        >
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table
            :data="pageAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column label="预警名称">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="days" label="预警天数"></el-table-column>
            <el-table-column
              prop="createCount"
              label="新建主播数"
            ></el-table-column>
            <el-table-column
              prop="intentionCount"
              label="意向主播数"
            ></el-table-column>
            <el-table-column
              prop="verifyCount"
              label="送审主播数"
            ></el-table-column>
            <el-table-column
              prop="trialCount"
              label="试播主播数"
            ></el-table-column>
            <el-table-column
              prop="launchedCount"
              label="已开播主播数"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="rEdit(scope.row)"
                  v-hasAuth:seestar_customizeEditWarning
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rDelete(scope.row.id)"
                  v-hasAuth:seestar_customizeDeleteWarning
                  >删除</el-button
                >
                <span
                  v-hasAuth:seestar_customizeEditWarning-seestar_customizeDeleteWarning.invert
                  >—</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- warningDrawerCp -->
    <el-drawer
      :title="warningDrawerCp.config.title"
      :visible.sync="warningDrawerCp.config.visible"
      :direction="warningDrawerCp.config.direction"
      :size="warningDrawerCp.config.size"
    >
      <div class="f-warningDrawerCp">
        <div class="n-content">
          <el-row>
            <el-col :span="8" :offset="8">
              <el-form ref="status" label-width="150px">
                <el-form-item label="预警计算时长：">
                  <el-input
                    placeholder="多少天内出现预警"
                    v-model="warningDrawerCp.data.days"
                  ></el-input>
                </el-form-item>
                <el-divider></el-divider>
                <div class="">
                  预警数据线
                </div>
                <el-form-item label="新建主播数">
                  <el-input
                    placeholder="新建主播数"
                    v-model="warningDrawerCp.data.createCount"
                  ></el-input>
                </el-form-item>
                <el-form-item label="意向主播数">
                  <el-input
                    placeholder="意向主播数"
                    v-model="warningDrawerCp.data.intentionCount"
                  ></el-input>
                </el-form-item>
                <el-form-item label="送审主播数">
                  <el-input
                    placeholder="送审主播数"
                    v-model="warningDrawerCp.data.verifyCount"
                  ></el-input>
                </el-form-item>
                <el-form-item label="试播主播数">
                  <el-input
                    placeholder="试播主播数"
                    v-model="warningDrawerCp.data.trialCount"
                  ></el-input>
                </el-form-item>
                <el-form-item label="已开播数">
                  <el-input
                    placeholder="已开播数"
                    v-model="warningDrawerCp.data.launchedCount"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="rSubmitWarningCreateForm"
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
              <div class="n-note">
                例如：<br />设置预警时长为7天，预警数据线新建主播数为10，意向主播数为5，送审主播数为2，试播主播数为2，已开播主播数为1，那么从今天0点更新算前7天数据，新建主播数少于10的招募会移入预警名单，新建主播数大于10，但意向、送审、试播、已开播主播数只要有其中一项少于设置数的都会移入预警名单
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getWarningSettingList,
  addWarningSetting,
  deleteWarningSetting
} from "@/api/customize.js";
import _ from "lodash";

export default {
  name: "seestar_customizeWarningList",
  data: () => ({
    pageAjax: {
      data: []
    },

    warningDrawerCp: {
      loading: false,
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "80%"
      },
      data: {
        days: "",
        createCount: "",
        intentionCount: "",
        verifyCount: "",
        trialCount: "",
        launchedCount: ""
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
  },
  methods: {
    getPageData() {
      let _that = this;
      getWarningSettingList().then(resp => {
        let respData = resp.data || {};

        if (respData.code === _that.STATUS.success[0]) {
          _that.pageAjax.data = respData.data;
        } else {
          _that.$message.error(respData.msg || "修改失败");
        }
      });
      _that.$store.dispatch("getPlatformList", { latest: true }).then(() => {
        let arr = _.cloneDeep(_that.$store.state.allPlatformList) || [];

        // 平台里面的全部项，因为id和parentId都为0，所以找父级会陷入死循环，所以抽离出来
        for (var i = arr.length; i--; ) {
          if (arr[i].id == 0) {
            arr.splice(i, 1);
            break;
          }
        }
        // 获取后代-childeren方式嵌套显示子级
      });
    },
    rToCreate() {
      this.warningDrawerCp.data = {
        days: "",
        createCount: "",
        intentionCount: "",
        verifyCount: "",
        trialCount: "",
        launchedCount: ""
      };
      this.warningDrawerCp.config.visible = true;
    },
    rSubmitWarningCreateForm() {
      let _that = this;
      let warningDrawerCpData = _that.warningDrawerCp.data;
      if (_that.warningDrawerCp.loading) {
        return;
      }

      if (
        isNaN(warningDrawerCpData.days) ||
        isNaN(warningDrawerCpData.createCount) ||
        isNaN(warningDrawerCpData.intentionCount) ||
        isNaN(warningDrawerCpData.trialCount) ||
        isNaN(warningDrawerCpData.verifyCount) ||
        isNaN(warningDrawerCpData.launchedCount)
      ) {
        _that.$message.error("所有填写的内容必须为数字");
        return;
      }

      if (!warningDrawerCpData.days || !warningDrawerCpData.createCount) {
        _that.$message.error("预警计算时长和新建主播数都不能为空");
        return;
      }
      if (warningDrawerCpData.days < 1 || warningDrawerCpData.createCount < 1) {
        _that.$message.error("预警计算时长和新建主播数都不能小于1");
        return;
      }

      addWarningSetting(warningDrawerCpData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
            _that.warningDrawerCp.config.visible = false;
            _that.getPageData();
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.warningDrawerCp.loading = false;
        });
    },
    rEdit(data) {
      this.warningDrawerCp.data = data;
      this.warningDrawerCp.config.visible = true;
    },
    navToDetail(id) {
      this.$router.push({
        name: "authority_platformDetail",
        query: {
          id: id
        }
      });
    },
    rDelete(id) {
      let _that = this;
      this.$confirm("你确定要删除此数据?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteWarningSetting({ id: id }).then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.getPageData();
          } else {
            _that.$message.error(respData.msg || "删除失败");
          }
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }

  .f-warningDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
}
</style>
